<template>
	<view>
		<navbar :back="true" title="我的收藏" color="#fff" leftIconColor="#fff"/>
        <view style="position: fixed;z-index: 20000;left: 0;width: 100%;background-color:#3277fc;padding:20rpx 0;" :style="{top:`${topheight}px`}">
        	<u-tabs :list="tabList" @click="changTab" lineColor="#fff" sticky :inactiveStyle="{color:'#fff',fontWeight:'450'}" :activeStyle="{color:'#fff',fontWeight:'650'}"></u-tabs>
        </view>
       <view style="height: 130rpx;"></view>
		<view v-if="list.length>0" style="padding: 25rpx;">
			<block v-for="(item,index) in list" :key="index">
				<view class="p-20 item" @tap="goDetail(item.oid)">
					<image :src="item.image" mode="" style="width: 250rpx;height:250rpx;border-radius: 20rpx;"></image>
					<view class="m-l-20 " style="font-size: 30rpx;width:65%;">
						<view
							style="line-height: 30rpx;color: rgba(49, 51, 64, 1);font-size: 29.17rpx;font-weight: 650;">
							{{item.name}}
						</view>
						<view class="u-line-2 name" style="margin-top: 10rpx;font-size: 22rpx;color: #a9a9a9;">
							收藏时间 : {{item.addTime}}
						</view>
						<view style="display: flex;justify-content:space-between;align-items: center;margin-top: 10rpx;">
							<view style="display: flex;align-items: center;margin: 8rpx 0;">
								  <view style="font-size:24rpx;color: #a9a9a9;">{{item.beginTime}}</view>
								  <view style="font-size: 24rpx;color: #a9a9a9;margin-left: 20rpx;">{{item.week}}</view>
							</view>
							<view style="font-size: 24rpx;color: #a9a9a9;">{{item.city}}</view>
						</view>
						<view style="color: #fdc066;font-size: 22rpx;background-color: #feeed6;padding: 10rpx;width:160rpx;border-radius: 10rpx;text-align: center;margin-top: 10rpx;;" v-if="item.people-item.makeNum>0&&item.people-item.makeNum<=30">仅剩{{item.people - item.makeNum}}位名额</view>
						<view style="display: flex;justify-content: space-between;align-items: center;":style="{marginTop:item.people-item.makeNum>0&&item.people-item.makeNum<=30?'10rpx':'40rpx'}">
							<view style="display: flex;align-items: center;">
							   <view style="font-size: 20rpx;border: 2rpx solid #fc6161;color: #fc6161;padding:4rpx 6rpx 6rpx 6rpx;border-radius: 58rpx;margin-right: 10rpx;" v-if="item.people-item.makeNum<=0">满</view>
							   <view style="font-size: 24rpx;color:#75a3fd;">{{item.makeNum}}</view>
							   <view style="font-size: 24rpx;color: #a9a9a9;">/{{item.people}}</view>
							</view>
							<view @tap.stop="cancel(item.oid)" class="btn">
								移除
							</view>
						</view>
					</view>
				</view>
			</block>

			<loading class="m-t-20 m-b-20" :loading="loading" :loadend="loadend" />
		</view>
		<u-empty v-else text="您还没有收藏" mode="list"></u-empty>
	</view>
</template>

<script>
	import {
		collectionList,
		cancelCollection
	} from "@/api/make.js"
	import priceStyle from '@/components/priceStyle.vue'
	import loading from "@/components/loading.vue"
	import navbar from '@/components/baseNavbar.vue'
	export default {
		components: {
			loading,
			priceStyle,
			navbar
		},
		data() {
			return {
				page: {
					page: 1,
					limit: 10,
					statue:''
				},
				loading: false,
				loadend: false,
				list: [],
				
				tabList:[
					{
						name:'全部',
						statue:''
					},{
						name:'未开始',
						statue:0
						
					},{
						name:'进行中',
						statue:1
					},{
						name:"己结束",
						statue:2
					}
				],
			}
		},
		onShow() {
			this.resetList()
		},
		methods: {
			resetList(callback){
				this.page.page = 1;
				this.loading = false
				this.loadend = false
				this.list = []
				this.getList(callback)
			},
			changTab(value) {
				this.list = []
				this.loadend = false
				this.loading = false;
				this.page.page = 1
				this.page.statue = value.statue
				this.getList()
			},
			goDetail(id) {
				uni.navigateTo({
					url: '/pages/sub/store/detail?id=' + id
				})
			},
			getList() {

				this.loading = true

				collectionList(this.page).then(res => {
					this.page.page++
					this.$set(this, 'list', this.list.concat(res.data.list))
					this.loading = false
					if (!res.data.hasNextPage)
						this.loadend = true
				}).catch(err => {
					this.loading = false
					this.loadend = true
				})
			},
			cancel(id) {
				cancelCollection({
					oid: id
				}).then(res => {
					uni.showToast({
						icon:'none',
						title:'删除成功'
					})
					setTimeout(()=>{
						this.page.page = 1
						this.loadend = false
						this.loading = false
						this.list = []
						this.getList()
					},500)
				})
			},
			
		},
		onReachBottom() {

			if (!this.loadend && !this.loading)
				this.getList()

		}
	}
</script>

<style lang="scss">
	page {
		background: rgba(242, 243, 245, 1);
	}
</style>
<style scoped lang="scss">
	.item {
		background: rgba(255, 255, 255, 1);
		border-radius: 12.5rpx;
		margin-bottom: 20rpx;
        display: flex;
	}

	.name {
		color: rgba(65, 68, 79, 1);
		font-size: 29.17rpx;
		line-height: 37.5rpx;
	}

	.right {
		display: flex;
		flex-wrap: wrap;
		align-content: space-between;
	}

	.price {
		color: rgba(39, 40, 42, 1);
		font-size: 25rpx;
	}

	.btn {
		width: 100rpx;
		line-height: 38rpx;
		border: 2.08rpx solid #4e8afc;
		border-radius: 20rpx;
		text-align: center;
		color: #4e8afc;
		font-size: 20.83rpx;
	}

	.item1 {
		margin-bottom: 20rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 4.17rpx 8.33rpx rgba(0, 0, 0, 0.02);
		border-radius: 12.5rpx;
		padding: 0 25rpx;
	}

	

	.item-body {
		padding: 20rpx;

	}
</style>
